<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>注册账号</title>
<link rel="stylesheet" href="/static/layui-v2.4.5/layui/css/layui.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/res/common/css/global.css">
<script type="text/javascript" src="/static/jquery/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style type="text/css">
    .horizontal-center{
        text-align: center;
    }
    .photo-row{
        margin-top: 50px;
    }
    .form-div{
        margin-top: 20px;
    }
    .form-item{
        width: 100%;
        margin-top: 10px;
        height: 40px;
        border: darkgray 1px solid;
        border-radius: 3px;
        vertical-align: center;
        display: flex;
        background-color: #FFFFFF;
    }
    .register-input{
        font-size: 20px;
        border: none;
        margin-top: 5px;
        margin-left: 5px;
        width: 100%;
        padding-right: 5px;
    }
    .submit-btn{
        height: 40px;
        margin-top: 30px;
        border: none;
        font-size: 18px;
        text-align: center;
    }
    .btn-span{
        color: #FFFFFF;
    }
    .register-label{
        text-align: center;
        font-size: 18px;
        width: 120px;
        padding: 11px 8px;
    }
    .validate-code-item{
        width: 100%;
        margin-top: 20px;
        height: 40px;
        vertical-align: center;
        display: flex;
    }
    .validate-code-input-div{
        width: 180px;
        height: 40px;
        border: lightgray 1px solid;
        border-radius: 3px;
        vertical-align: center;
        background-color: #FFFFFF;
        margin-left: 10px;
    }
    .validate-code-input{
        width: 60px;
        font-size: 20px;
        margin-top: 10px;
        margin-left: 30px;
    }
    .validate-code-btn{
        margin-left: 10px;
        height: 40px;
        width: 100px;
        float: right;
    }
</style>
</head>
<body>
<div class="layui-box top-div">
    <div class="layui-row photo-row">
        <div class="layui-col-xs4">&nbsp;</div>
        <div class="layui-col-xs4 horizontal-center">
            <img class="layui-circle photo" src="/res/icon/middle/head-default.png">
        </div>
        <div class="layui-col-xs4">&nbsp;</div>
    </div>
    <div class="layui-row form-row">
        <div class="layui-col-xs1">&nbsp;</div>
        <div class="layui-col-xs10">
            <div class="form-div">
                <div id="register-div">
                    <!--<div class="form-item">
                        <label class="layui-form-label register-label">手机号</label>
                        <input class="register-input" type="text">
                    </div>-->
                    <div class="form-item">
                        <label class="layui-form-label register-label">邮&nbsp;箱</label>
                        <input class="register-input" type="text">
                    </div>
                    <div class="form-item">
                        <label class="layui-form-label register-label">密&nbsp;码</label>
                        <input class="register-input" type="password">
                    </div>
                    <div class="form-item">
                        <label class="layui-form-label register-label">确认密码</label>
                        <input class="register-input" type="password">
                    </div>
                    <div class="validate-code-item">
                        <i style="width: 100%;"></i>
                        <div class="validate-code-input-div">
                            <input id="validate-code-input" class="register-input validate-code-input" maxlength="4" type="number">
                        </div>
                        <button id="validate-code-btn" class="layui-btn validate-code-btn">发送&nbsp;<span id="timerCount"></span>s</button>
                    </div>
                    <button class="layui-btn  layui-btn-fluid submit-btn"><span class="btn-span">注&nbsp;册</span></button>
                </div>
            </div>
        </div>
        <div class="layui-col-xs1">&nbsp;</div>
    </div>
</div>

<script src="/static/layui-v2.4.5/layui/layui.js"></script>
<script>
    var timerCount;
    var valiCodeExpireSeconds=10;
    var seconds=valiCodeExpireSeconds;
    var valiCodeLength=4;
    function changeSecond(){
        if (seconds>0){
            seconds--;
        }else {
            clearInterval(timerCount);
            $('#validate-code-btn').removeClass('layui-btn-disabled');
            $('#validate-code-btn').attr('disabled', false);
            seconds=valiCodeExpireSeconds;
        }
        $('#timerCount').text(seconds);
    }
    $(function () {
        $('#validate-code-btn').click(function () {
            $('#validate-code-btn').addClass('layui-btn-disabled');
            $('#validate-code-btn').attr('disabled', true);
            timerCount=setInterval(function () {
                changeSecond();
            }, 1000);
        });
        $('#validate-code-input').on('input', function () {
            if(this.value.length>valiCodeLength){
                this.value=this.value.slice(0,valiCodeLength);
            }
        })
    });
</script>
</body>
</html>